import React from 'react';
import { Animated, Easing } from 'react-native';

class SlideIn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      slideAnim: new Animated.Value(-100)
    };
  }

  componentDidMount() {
    Animated.timing(this.state.slideAnim, {
      toValue: 0,
      duration: 300,
      easing: Easing.out(Easing.ease),
      useNativeDriver: true
    }).start();
  }

  render() {
    return (
      <Animated.View style={{ transform: [{ translateY: this.state.slideAnim }] }}>
        {this.props.children}
      </Animated.View>
    );
  }
}

export default SlideIn;